<template>
  <view class="container">
    <div class="nav">
      <navigator :class="['navigator2']" hover-class="none">
        <view class="main-current2">
          <text>用户房间信息</text>
          <view class="dorminfo">
            <text>姓 名：{{ name || '暂无' }}</text>
            <text>学 号：{{ account || '暂无' }}</text>
            <text>房间号：{{ selectedRoom || '暂无' }}</text>
          </view>
        </view>
      </navigator>

      <!-- 使用 uni-app 的 picker 组件选择房间号 -->
      <!--   <view class="picker-container">

        <view class="picker-item">
          <text>选择办公室：</text>
          <picker mode="selector" :range="rooms" :value="roomIndex" @change="onRoomChange">
            <view class="picker">
              {{ selectedRoom || '请选择办公室' }}
            </view>
          </picker>
        </view>

      
        <view class="picker-item">
          <text>选择教室：</text>
          <picker mode="selector" :range="classrooms" :value="classroomIndex" @change="onClassroomChange">
            <view class="picker">
              {{ selectedClassroom || '请选择教室' }}
            </view>
          </picker>
        </view>

  
        <view class="picker-item">
          <text>选择宿舍：</text>
          <picker mode="selector" :range="dormitories" :value="dormitoryIndex" @change="onDormitoryChange">
            <view class="picker">
              {{ selectedDormitory || '请选择宿舍' }}
            </view>
          </picker>
        </view>

   
        <button class="open-door-button" hover-class="none" hover-stop-propagation @click="handleOpenDoor">开门</button>
      </view> -->

      <!-- 其他导航按钮 -->
      <navigator :class="['navigator', { 'disabled': !selectedRoom }]" hover-class="none"
        url="/waterElectric/queryWater/queryWater">
        <view class="main-current">
          <image src="/static/图标/03冷水充值.png"></image>
          <text>冷水充值</text>
        </view>
      </navigator>
      <navigator :class="['navigator', { 'disabled': !selectedRoom }]" hover-class="none"
        url="/waterElectric/queryElectric/queryElectric">
        <view class="main-current">
          <image src="/static/图标/04充电电费.png"></image>
          <text>电费充值</text>
        </view>
      </navigator>
      <navigator :class="['navigator', { 'disabled': !selectedRoom }]" hover-class="none"
        url="/blueTooth/scanCode/scanCode">
        <view class="main-current">
          <image src="/static/图标/09热水花洒.png"></image>
          <text>热水使用</text>
        </view>
      </navigator>
      <navigator :class="['navigator']" hover-class="none" :url="getTargetUrl">
        <view class="main-current">
          <image src="/static/图标/10宿舍管理.png"></image>
          <text>我的宿舍</text>
        </view>
      </navigator>
    </div>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 办公室号列表
        rooms: ['101', '102', '103', '201', '202', '203'], // 示例数据
        roomIndex: 0, // 当前选中的房间号索引
        selectedRoom: '', // 当前选中的房间号

        // 教室号列表
        classrooms: ['301', '302', '303', '401', '402', '403'], // 示例数据
        classroomIndex: 0, // 当前选中的教室号索引
        selectedClassroom: '', // 当前选中的教室号

        // 宿舍号列表
        dormitories: ['501', '502', '503', '601', '602', '603'], // 示例数据
        dormitoryIndex: 0, // 当前选中的宿舍号索引
        selectedDormitory: '', // 当前选中的宿舍号

        // 用户房间信息
        name: '', // 姓名
        account: '', // 学号
      };
    },
    computed: {
      // 动态计算目标 URL
      getTargetUrl() {
        const userInfo = uni.getStorageSync('userInfo') || {}; // 获取本地存储的 userInfo
        this.name = userInfo.name || '';
        this.account = userInfo.account || '';

        if (this.selectedRoom) {
          return '/myDormitory/housin/housin';
        } else {
          return '/myDormitory/submit_form/submit_form';
        }
      },
    },
    onShow() {
      // 页面显示时更新用户信息
      const userInfo = uni.getStorageSync('userInfo') || {};
      this.name = userInfo.name || '';
      this.account = userInfo.account || '';
      this.selectedRoom = userInfo.ss_mc || ''; // 从本地存储中获取房间号

      // 设置默认选中的房间号索引
      this.roomIndex = this.rooms.indexOf(this.selectedRoom);
    },
    methods: {
      // 房间号选择事件
      onRoomChange(e) {
        this.roomIndex = e.detail.value; // 更新选中的索引
        this.selectedRoom = this.rooms[this.roomIndex]; // 更新选中的房间号
        this.selectedClassroom = ''; // 清空教室号
        this.selectedDormitory = ''; // 清空宿舍号
      },

      // 教室号选择事件
      onClassroomChange(e) {
        this.classroomIndex = e.detail.value; // 更新选中的索引
        this.selectedClassroom = this.classrooms[this.classroomIndex]; // 更新选中的教室号
        this.selectedRoom = ''; // 清空房间号
        this.selectedDormitory = ''; // 清空宿舍号
      },

      // 宿舍号选择事件
      onDormitoryChange(e) {
        this.dormitoryIndex = e.detail.value; // 更新选中的索引
        this.selectedDormitory = this.dormitories[this.dormitoryIndex]; // 更新选中的宿舍号
        this.selectedRoom = ''; // 清空房间号
        this.selectedClassroom = ''; // 清空教室号
      },

      // 开门按钮点击事件
      handleOpenDoor() {
        if (this.selectedRoom) {
          uni.showToast({
            title: `正在打开办公室：${this.selectedRoom}`,
            icon: 'none',
          });
        } else if (this.selectedClassroom) {
          uni.showToast({
            title: `正在打开教室：${this.selectedClassroom}`,
            icon: 'none',
          });
        } else if (this.selectedDormitory) {
          uni.showToast({
            title: `正在打开宿舍：${this.selectedDormitory}`,
            icon: 'none',
          });
        } else {
          uni.showToast({
            title: '请先选择一个房间、教室或宿舍',
            icon: 'none',
          });
        }

        // 清空所有选择器
        this.selectedRoom = '';
        this.selectedClassroom = '';
        this.selectedDormitory = '';
        this.roomIndex = 0;
        this.classroomIndex = 0;
        this.dormitoryIndex = 0;
      },
    },
  };
</script>

<style scoped>
  .container {
    display: flex;
    height: 100vh;
    align-items: flex-start;
    padding-top: 2vh;
    justify-content: center;
  }

  .main-current2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dorminfo {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    height: 70%;
    border-radius: 10px;
    padding: 10px;
  }

  .navigator2 {
    flex: 0 0 calc(100%);
    padding-top: 2vh;
    height: 20vh;
    background-color: #2ba245;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    color: white;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    gap: 10px;
  }

  .disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(50%);
  }

  .navigator {
    flex: 0 0 calc(50% - 5px);
    aspect-ratio: 1;
    background-color: #2ba245;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .main-current {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  image {
    width: 40px;
    height: 40px;
  }

  .picker-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #2ba245;
    padding: 10px;
    border-radius: 10px;
    color: white;

  }

  .picker-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .picker {
    flex: 1;
    margin-left: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
  }

  .open-door-button {
    width: 100%;
    padding: 12px;
    background-color: white;
    color: black;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    border: none;
    font-size: 16px;
    margin-top: 3px;
  }
</style>